<template>
    <div>
        <div class="header">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div class="userT"><i class="el-icon-warning"></i>单位用户</div>
            <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
             <el-form-item label="登录账号" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
             <el-form-item label="新密码" prop="newpassword">
               <el-input v-model="ruleForm.newpassword"></el-input>
             </el-form-item>
             <el-form-item label="确认新密码" prop="password">
               <el-input v-model="ruleForm.password"></el-input>
             </el-form-item>
             <el-form-item label="手机号码" prop="phone">
               <el-input v-model="ruleForm.phone"></el-input>
             </el-form-item>
             <el-form-item label="短信验证码" prop="yzm">
               <el-input v-model="ruleForm.yzm" style="width:62%"></el-input><el-button type="info">发送验证码</el-button>
             </el-form-item>
            </el-form>
            <div class="btns">
                <el-button class="el-icon-check" type="primary">提交</el-button>
               <el-button class="el-icon-delete">清空</el-button>
               <el-button class="el-icon-back" type="success" @click="back">返回</el-button>
            </div>
            </div>
          </el-card>

        </div>
    </div>
  </template>

<script>
export default {
        data(){
            return {
                ruleForm:{
                    name:'',
                    newpassword:'',
                    password:'',
                    phone:'',
                    yzm:'',
                },
                rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          newpassword: [
            { required: true, message: '输入新密码', trigger: 'change' }
          ],
          password: [
            {  required: true, message: '再次输入密码', trigger: 'change' }
          ],
          phone: [
            {  required: true, message: '请输入电话号码', trigger: 'change' }
          ],
          yzm: [
            {  required: true, message: '请输入验证码', trigger: 'change' }
          ],
                }
            }
        },
        methods:{
            back(){
                this.$router.push('/login')
            }
        }
    }
</script>

  <style lang="less" scoped >
   body{
    height: 100%;
   }
   .header{
    width: 60%;
    margin: auto;
    margin-top: 10%;
    justify-content: center;
    border: 1px solid black;
    .userT{
        width: 90%;
        text-align: left;
        margin: auto;
        border-bottom: 1px solid pink;
        margin-bottom: 5%;
    }
   }
   .el-form{
    width: 50%;
    margin: auto;
    margin-left: 10%;
   }
   .btns{
    width: 100%;
    margin-left: 32%;
    margin-top: 5%;
   }
  </style>
  